<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="format-detection" content="telephone=no" />
	<title>置换记录</title>
	<style>
		html,
		body,
		p {
			margin: 0;
			padding: 0;
			font-size: 0;
			font-family: 'PingFang-SC-Bold';
		}

		body * {
			box-sizing: border-box;
		}

		div,
		p,
		span {
			line-height: 100%;
		}

		html {
			background: #F8F8F8;
		}

		body::-webkit-scrollbar {
			width: 0px;
			height: 0px;
			background-color: transparent;
		}

		body::-webkit-scrollbar-track {
			background-color: #fff;
			border-radius: 0px;
			box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
		}

		body::-webkit-scrollbar-thumb {
			background-color: #fff;
			border-radius: 0px;
			box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
		}

		.width100 {
			width: 100%;
		}

		.box {
			padding: 0 0.28rem;
			font-size: 0.24rem;
			color: #999999;
			padding-bottom: 0.3rem;
		}

		.box ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.box li {
			background: #fff;
			padding: 0 0.24rem;
			padding-bottom: 0.28rem;
			margin-top: 0.2rem;
			border-radius: 0.04rem;
		}

		.box li:first-child {
			margin-top: 0.24rem;
			;
		}

		.floatleft {
			float: left;
		}

		.floatright {
			float: right;
		}

		.box li>p {
			font-size: 0.24rem;
		}

		.box li>.p1 {
			overflow: hidden;
			padding-top: 0.3rem;
		}

		.box li .success {
			color: #23B27A;
			/* 成功 */
		}

		.box li .running {
			color: #F94949;
			/* 置换中 */
		}

		.box li .fail {
			color: #999999;
			/* 置换失败 */
		}

		.box li>.p2 {
			color: #262626;
			overflow: hidden;
			padding-top: 0.2rem;
		}

		.box li>.slide>p {
			font-size: 0.24rem
		}

		.slide {
			background: #F8F8F8;
			margin-top: 0.3rem;
			padding: 0 0.2rem;
		}

		.slideContent {
			display: none;
			padding-bottom: 0.26rem;
		}

		.slideContent>p {
			font-size: 0.24rem;
			overflow: hidden;
			padding-top: 0.2rem;
		}

		.slide>.title {
			padding: 0.18rem 0;
			overflow: hidden;
		}

		.close>.title {
			color: #999;
		}

		.open>.title {
			color: #262626;
		}

		.slide .slideBtn>span {
			position: relative;
			padding-right: 0.35rem;
		}

		.close .slideBtn>span:last-child:after {
			content: '';
			display: inline-block;
			background: url("../../image/xialax.png") center center no-repeat;
			background-size: 0.16rem auto;
			position: absolute;
			right: 0;
			top: 0;
			width: 0.35rem;
			z-index: 1;
			height: 100%;
			opacity: 0.45;
		}

		.open .slideBtn>span:last-child:after {
			content: '';
			display: inline-block;
			background: url("../../image/xialax.png") center center no-repeat;
			background-size: 0.16rem auto;
			position: absolute;
			right: 0;
			top: 0;
			width: 0.35rem;
			z-index: 1;
			height: 100%;
			opacity: 0.45;
			transform: rotate(180deg);
			-webkit-transform: rotate(180deg);
		}
	</style>
</head>

<body>
	<div class="box">
		<ul class="couponListBox">
			<!-- <li>
				<p class="p1">
					<span class="date floatleft">2020-05-11 12:12:15</span>
					<span class="success floatright">置换成功</span>
				</p>
				<p class="p2">
					<span class="floatleft">置换后总金额:10493 CNY</span>
					<span class="floatright">已补:1507 CNY</span>
				</p>
				<div class="slide close">
					<p class="title slideBtn">
						<span class="floatleft">用于置换BTC合约</span>
						<span class="floatright">10 T</span>
					</p>
					<div class="slideContent">
						<p>
							<span class="floatleft">订单号:2020121547845120</span>
							<span class="floatright">7 T</span>
						</p>
						<p>
							<span class="floatleft">订单号:2020121547845120</span>
							<span class="floatright">7 T</span>
						</p>
					</div>
				</div>
				<div class="slide close" style="margin-top: 0.16rem;">
					<p class="title slideBtn">
						<span class="floatleft">置换IPFS合约</span>
						<span class="floatright">10 T</span>
					</p>
					<div class="slideContent">
						<p>
							<span class="floatleft">订单号:2020121547845120</span>
							<span class="floatright">7 T</span>
						</p>
						<p>
							<span class="floatleft">订单号:2020121547845120</span>
							<span class="floatright">7 T</span>
						</p>
					</div>
				</div>
			</li>
			<li>
				<p class="p1">
					<span class="date floatleft">2020-05-11 12:12:15</span>
					<span class="success floatright">置换成功</span>
				</p>
				<p class="p2">
					<span class="floatleft">置换后总金额:10493 CNY</span>
					<span class="floatright">已补:1507 CNY</span>
				</p>
				<div class="slide close">
					<p class="title slideBtn">
						<span class="floatleft">用于置换BTC合约</span>
						<span class="floatright">10 T</span>
					</p>
					<div class="slideContent">
						<p>
							<span class="floatleft">订单号:2020121547845120</span>
							<span class="floatright">7 T</span>
						</p>
						<p>
							<span class="floatleft">订单号:2020121547845120</span>
							<span class="floatright">7 T</span>
						</p>
					</div>
				</div>
				<div class="slide close" style="margin-top: 0.16rem;">
					<p class="title slideBtn">
						<span class="floatleft">置换IPFS合约</span>
						<span class="floatright">10 T</span>
					</p>
					<div class="slideContent">
						<p>
							<span class="floatleft">订单号:2020121547845120</span>
							<span class="floatright">7 T</span>
						</p>
						<p>
							<span class="floatleft">订单号:2020121547845120</span>
							<span class="floatright">7 T</span>
						</p>
					</div>
				</div>
			</li> -->
		</ul>
	</div>
</body>

</html>
<script src="../../script/autosize.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script type="text/html" id="indent">
    {{~it:item:index}}
	<li>
		<p class="p1">
			<span class="date floatleft" style="color:#F5B314;">
				{{?item.type==1}}
				置换高波BTC
				{{??}}
				置换IPFS合约
				{{?}}
			</span>
			{{?item.state ==1}}
				<span class="floatright success">成功</span>
			{{??item.state ==0}}
				<span class="floatright running">待处理</span>
			{{??}}
				<span class="floatright fail">失败</span>
			{{?}}
		</p>
		<p class="p2">
			<span class="floatleft">置换后总金额:{{=item.ipfs_amount}}{{=item.currency_code}}</span>
			{{?item.diff_amount>0}}
				<span class="floatright">已退:{{=item.diff_amount}} {{=item.currency_code}}</span>
			{{??}}
				<span class="floatright">已补:{{=Math.abs(item.diff_amount)}} {{=item.currency_code}}</span>
			{{?}}
		</p>
		<div class="slide close">
			<p class="title slideBtn">
				<span class="floatleft">用于置换BTC合约(基础算力)</span>
				<span class="floatright">{{=item.btc_order_info_totalBase_power}} T</span>
			</p>
			<div class="slideContent">
				{{~item['btc_order_info']:item2:key}}
				<p>
					<span class="floatleft">订单号:{{=item2.order_num}}</span>
					<span class="floatright">{{=item2.base_power}} T</span>
				</p>
				{{~}}
			</div>
		</div>
		{{?item.type!=1}}
		<div class="slide close" style="margin-top: 0.16rem;">
			<p class="title slideBtn">
				<span class="floatleft">置换IPFS合约</span>
				<span class="floatright">{{=item.ipfs_power}} T </span>
			</p>
			<div class="slideContent">
				<p>
					<span class="floatleft">订单号:{{=item.ipfs_order_num}}</span>
					<span class="floatright">{{=item.ipfs_power}} T</span>
				</p>
			</div>
		</div>
		{{??}}
		<div class="slide close" style="margin-top: 0.16rem;">
			<p class="title slideBtn">
				<span class="floatleft">置换高波BTC合约</span>
				<span class="floatright">{{=item.ipfs_power}} T + {{=item.bhp_power}}(BHP参配)</span>
			</p>
			<div class="slideContent">
				<p>
					<span class="floatleft">订单号:{{=item.ipfs_order_num}}</span>
					<span class="floatright">{{=item.ipfs_power}} T</span>
				</p>
			</div>
		</div>
		{{?}}
		<p class="p1" style="display:flex;justify-content: flex-end;">
			置换日期：{{=item.update_time}}
		</p>
	</li>
    {{~}}
</script>
<script>
	apiready = function () {
		var app = new APP();
		var account = app.getAccount();
		var curPage = 1;//当前页
		var totalPage = 2;//总页数
		//点击展开动画
		function BindSlideToggle() {
			$("li .slideBtn").unbind('click').click((function () {
				var thiz = $(this);
				thiz.siblings('.slideContent').slideToggle(200);
				var Box = thiz.parent('.slide');
				if (Box.hasClass('close')) {
					Box.removeClass('close').addClass('open');
				} else {
					Box.removeClass('open').addClass('close');
				}
			}));
		}
		//置换BTC矿机列表
		function couponList(account, page, isdown) {
			app.ajaxPro({
				url: "order/get-replace",
				values: {
					token: account.token,
					page: page,
					pageSize: 20
				},
				openFlower: true
			}, function (ret) {
				if (ret.code == 200) {
					var dataList = ret.data.lists;
					totalPage = ret.data.totalPage;
					for (var i = 0; i < dataList.length; i++) {
						var cur = dataList[i];
						var btc_order_info_totalBase_power = 0;
						var btc_order_info = cur.btc_order_info;
						for (var h = 0; h < btc_order_info.length; h++) {
							btc_order_info[h].base_power = app.accMul(btc_order_info[h].base_power, btc_order_info[h].num);
							btc_order_info_totalBase_power = app.accAdd(btc_order_info_totalBase_power, btc_order_info[h].base_power);
						}
						dataList[i].btc_order_info_totalBase_power = btc_order_info_totalBase_power;
					}
					var temp = doT.template($("#indent").text());
					if (isdown) {
						$(".couponListBox").html(temp(dataList));
					} else {
						$(".couponListBox").append(temp(dataList));
					}
					if (page == 1 && dataList.length == 0) {
						$("#listState").show();
					} else {
						$("#listState").hide();
					}
					BindSlideToggle();
				} else {
					app.toast(ret.message)
				}
			})
		}
		couponList(account, curPage, true);
		//下拉刷新
		app.downRefresh(function () {
			$(".couponListBox").empty();
			curPage = 1;
			totalPage = 2;
			couponList(account, curPage, true);
		});
		// 监听滚动到底部 加载更多
		app.toBottom(function () {
			if (curPage < totalPage) {
				curPage++;
				couponList(account, curPage, false);
			}
		});
		app.headerMap();
	}
</script>